<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-pdf-reader</title>
    <script src="//unpkg.com/vue@2.5.22/dist/vue.js"></script>
    <script src="//unpkg.com/vue-pdf-reader@0.2.8/dist/vue-pdf-reader.min.js"></script>
    <link href="//unpkg.com/vue-pdf-reader@0.2.8/dist/vue-pdf-reader.min.css"  rel="stylesheet" type="text/css" >
</head>
<body>
<div id="UApp">
    <template>
        <div style="width: 500px">
            <div>
                {{currentPage}} / {{pageCount}}
                <pdf
                        :src="pdfUrl"
                        @num-pages="pageCount = $event"
                        @page-loaded="currentPage = $event"
                ></pdf>
            </div>
        </div>
    </template>
</div>

</body>
<script>
    Vue.use(VuePdfReader);
    console.log('VuePdfReader');
    console.log(VuePdfReader);
    var vueApp = new Vue({
        el: '#UApp',
        // router,
        components: {
            pdf
        },
        mounted(){
            console.log('mounted');
        },
        data() {
            return {
                currentPage: 0,
                pageCount: 0,
                pdfUrl: 'https://www.nvidia.com/content/dam/en-zz/zh_cn/Solutions/Data-Center/tesla-v100/volta-v100-datasheet-update-a4-nv-636418-r4-lr.pdf',
            }
        },
        methods: {

        },
    });

    console.log('欢迎查看开发者Vue调试报告');
</script>
</html>
